<template>
  <div>
    <div class="star_container">
      <div
        v-for="(item,index) in array"
        :key="index"
      >
        <div
          v-if="value- 1 >= index"
          class="star_item"
        >
          <img
            :style="{width:'12px',height:'12px',marginBottom:'5px'}"
            src="@/assets/img/star.png"
          >
        </div>
        <!-- 半星 -->
        <!-- <div
          v-else-if="value - index >0"
        >
          <div :style="{width:'0.12rem',height:'0.12rem',flexDirection:'row',position:'absolute'}">
            <div>
              <img
                :style="{width:'0.12rem',height:'0.12rem',marginBottom:'0.05rem'}"
                src="@/assets/img/grey-star.png"
              >
            </div>
            <div :style="{width:'0.12rem',height:'0.12rem',position:'absolute',borderRadius: '0.02rem'}" />
          </div>
        </div> -->
        <div
          v-else
          class="star_item"
        >
          <img
            :style="{width:'12px',height:'12px',marginBottom:'5px'}"
            src="@/assets/img/grey-star.png"
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Stars',
  props: {
    value: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      array: [0, 1, 2, 3, 4],
      if_background: null
    }
  },
  created() {
    this.if_background = (1.4 * (this.$props.value.toString().split('.')[1] !== undefined ? this.value.toString().split('.')[1] : '')) + 'px'
  }
}
</script>
<style scoped>
.star_container {
  display: flex;
  align-items: center;
}
.star_item {
  display: flex;
  margin-right: 6px;
  border-radius: 2px;
  width: 12px;
  height: 12px;
}
.star_item image {
  margin: auto;
}
</style>
